<template>
  <div class="order">
    <div class="order-top" @click="myOrder">
      我的订单
      <i>></i>
    </div>
    <div class="order-bum">
      <ul>
        <li @click='goUnpaid'><i class="icon iconfont icon-cart"> </i>待付款</li>
        <li @click='goUnshipped'><i class="icon iconfont icon-cry"> </i> 待发货</li>
        <li @click='goWaiting'><i class="icon iconfont icon-comments"> </i> 待收货</li>
        <li @click='goEvaluate'><i class="icon iconfont icon-category"> </i>待评价</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "wgy-order",
  data() {
    return {};
  },
  created() {},
  methods: {
    // 待付款
    goUnpaid() {
      this.$router.push('unpaid')
    },
      // 待发货
    goUnshipped() {
      this.$router.push('unshipped')
    },
      // 待收货
    goWaiting() {
      this.$router.push('waiting')
    },
      // 待评价
    goEvaluate() {
      this.$router.push('evaluate')
    },
    //我的订单
    myOrder() {
      this.$router.push('myOrder')

    }
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  height: 2.4rem;
  margin-bottom: 0.2rem;
  background-color: #fff;
  .order-top {
    height: 1rem;
    font-size: 0.3rem;
    line-height: 1rem;
    padding: 0 0.2rem;
    width: 100%;
    border-bottom: 1px solid #eee;
    i {
      float: right;
    }
  }
  .order-bum {
    width: 100%;
    height: 1.4rem;
    // background-color: deeppink;
    font-size: 0.3rem;
    ul {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      li {
        display: flex;
        flex-direction: column;
        text-align: center;
        color: #6d6d6d;
        i {
          font-size: 0.56rem;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
}
</style>
